API實作好了，接下來我們可以開始來完成我們的旅遊網站。

建立Tour的Module

在App目錄下，新增一個tour目錄

用來放置所有行程相關的操作元件

接下來在tour目錄底下新增一個tour.module.ts

我們還不需要設定使用任何Component及Serive

// in tour.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class TourModule { }

建立TourList的Component

接下來在這個tour目錄建立一個component叫做tour-list

用來顯示行程列表

我們可以使用AngularDoc Extension幫我們快速建立component

只要在指定的目錄下按右鍵選擇ng g component即可

我們可以觀察tour.module.ts被自動加入了TourListComponent

我們可以在app.component.html

加入剛剛新建立的component

in app.component.html

<app-header></app-header>
<app-tour-list></app-tour-list>

但卻發現網頁有錯誤訊息

這個錯誤的原因，是因為根module的AppModule

不知道TourModule的存在，所以我們必須要在AppModule import進來TourModule

in app.module.ts

...

import { TourModule } from './tour/tour.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    ...
    TourModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

重新執行還是發生錯誤，因為TourModule中，還沒把TourListCompoent做export，其他的Module就不能用。

我們回到TourModule中，重新設定export

// in tour.module.ts
...
import { TourListComponent } from './tour-list/tour-list.component';

@NgModule({
  ...
  exports:[TourListComponent]
})
export class TourModule { }

重新執行後，就可以看到正確的結果